<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        文本框
            maxlength：最大长度（字母或汉字都一样）
            placeholder: 提示 
            value: 默认值
    -->
    <input type="text" maxlength="5" placeholder="文本" value="默认值" name="t1" id="t1" /><br>
    <!-- 密码框 -->
    <input type="password" maxlength="5" placeholder="请输入密码" value="默认密码:)" name="p1" id="p1" /><br>
    <!-- 数字输入框 -->
    <input type="number" placeholder="123" name="n1" value="12345" id="n1" /><br>
    <!-- 颜色选择框 -->
    <input type="color" name="c1" id="c1" /><br>
    <!-- 复选框 -->
    <input type="checkbox" name="cb1" id="cb1" /><br>
    <!-- 日期选择框 -->
    <input type="date" name="d1" id="d1" /><br>
    <!-- 时间选择框 -->
    <input type="time" name="t1" id="t1" /><br>
    <hr>

    <!-- 
        按钮
            有两种：input按钮 和 <button>
            <button>...</button>可以用图片
    -->
    <input type="button" value="input按钮">
    <button name="btn1">button按钮</button>
    <button name="btn2"><img src="mn1.png" width="40" height="30"/></button>
    <hr>

    <!-- <p>...</p> 段落
        自成一行
        自动在其前后创建一些空白(与<div>不同)
        不能包含<div>, <ul>, <ol>，反之可以。
    -->
    <p>张三</p>
    <p>李四</p>
    <p>王五</p>
    <p>
        <div>我是一个div</div>
    </p>
    <hr>
    <!-- 
        <span>，用来组合文档中的行内元素。即在一行内尽量排列，不会占用多余空间
     -->
     <span>span1</span><span>span2</span>
</body>

</html>